<template>
  <div style="position:relative;">
    <div class="header">
      <!-- 左侧菜单 -->
      <a-row style="width:68.75rem">
        <a-col :span="1">
          <!-- 菜单伸缩图标 -->
          <a-icon 
            class="trigger" 
            :type="!iconColl ? 'menu-fold': 'menu-unfold'" 
            @click="handerColl(!iconColl)"
          />
        </a-col>
        <a-col :span="23">
          <!-- 菜单列表 -->
          <a-row>
            <a-col
              :span="2" 
              v-for="(item,index) in menuList"
              :key="index"
              :class="menuNum === index? 'header-menu-self header-menu-active' : 'header-menu-self'"
              @click="selMenu(item.title, index)"
            >{{item.isHide? '' :item.title}}</a-col>
          </a-row>
        </a-col>
      </a-row>
      <!-- 右侧信息 -->
      <div class="header-right">
        <div class="header-right-flex">
          <!-- 搜索 -->
          <div>
            <a-input-search
              style="width: 12.5rem"
              @search="onSearch"
            />
          </div>
          <!-- 设置 -->
          <div  class="setting" @click="selMenu('设置', 99)">
            <a-icon type="setting" />
            设置
          </div>
          <!-- 消息 -->
          <div class="setting">
            <a-icon type="bell" />
            消息
          </div>
          <div class="spilt-line"></div>
          <!-- 账号 -->
          <div @click="isPersonShow = !isPersonShow  ">
            <img src="@/assets/logo.png" alt="头像" >
            <span style="color:#323232;margin:0 .625rem;">Hughes休斯[主账号]</span> 
            <a-icon :type="isPersonShow ? 'up' : 'down'" />
          </div>
        </div>
        <!-- 个人信息弹窗 -->
        <div 
          class="person-setting" 
          v-if="isPersonShow"
        >
          <div><a-icon type="user" /> 我的账号</div>
          <div><a-icon type="sound" /> 通知设置</div>
          <div><a-icon type="file-search" /> 平台服务订单</div>
          <div><a-icon type="logout" /> 退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入菜单
import { menuList } from '@/utils/menuList'
import { Bus } from '@/utils/bus'
export default {
  props: {
    iconColl: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const arr = this.$router.options.routes
    return {
      menuList: [],
      arr,
      isPersonShow: false,
      menuNum: ''
    }
  },
  created() {
    this.menuList = menuList;
  },
  mounted() {
    window.window.console.log(this.arr)
    // window.window.console.log('header......www',this.$route, this.$route.name)
    // 监听路径指定到对应的视图
    Bus.$emit('mainMenu', this.$route.meta.title)
    // 高亮主菜单
    this.menuNum = this.menuList.findIndex(item => item.title === this.$route.meta.title)
  },
  watch: {
    $route(to, from) {
      // window.console.log('toooooo', to, from)
       // 高亮主菜单
      this.menuNum = this.menuList.findIndex(item => item.title === to.meta.title)
      // Bus.$emit('mainMenu', to.meta.title)
    }
  },
  methods: {
    // 点击菜单显示子菜单
    selMenu(title, index) {
      this.menuNum = index
      // 主菜单名传给二级菜单
      Bus.$emit('mainMenu', title)
      // 99是设置栏目不在列表内，单独写
      if(index === 99) {
        this.$router.push({name: 'setting'})
      }else{
        this.$router.push({name: this.menuList[index].name})
      }
    },
    // 修改收缩菜单icon的值
    handerColl(val) {
      this.$emit('collStatus', val)
    },
    // 搜索
    onSearch() {

    }
  }
}
</script>
<style lang="less" scoped>
.header {
  font-size: 14px;
  color:#333333;
  display: flex;
  &-in {
    display: inline-block;
  }
  .trigger {
    padding: 0 10px;
    line-height: 64px;
    font-size: 22px;
  }
  .trigger:hover {
    background: #E5F0FF;
  }
  &-menu-self {
    text-align: center;
    padding:0 1px;
    cursor: default;
  }
  &-menu-active {
    // color: #358CF0;
    color: #ffffff;
    background: #358CF0;
  }
  &-menu-self:hover {
    color: #ffffff;
    background: #358CF0;
  }
  .active {
    color: #ffffff;
  }
  &-right {
    position: absolute;
    right: 0;
    background: #ffffff;
    // border: 1px solid red;
    min-width: 650px;
    .spilt-line {
      width: 2px;
      height: 30px;
      background: #E7E7E7;
    }
    .setting {
      color: #666666;
    }
    &-flex {
      display:flex;
      justify-content: space-around;
      align-items: center;
      cursor: default;
      img {
        vertical-align: middle;
        border-radius: 50%;
        border: 1px solid red;
        width: 25px;
        height:25px;
      }
    }
    .person-setting {
      width: 139px;
      height: 160px;
      position: absolute;
      top: 60px;
      right: 20px;
      background: #ffffff;
      box-shadow: 0 1px 5px 0 #666666;
      border-radius: 5px;
      color: #666666;
      cursor: pointer;
      div {
        padding-left: 15px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>